<mk-box [isRemovable]="false">
  <mk-box-content>
    <div class="col-lg-12" style="padding: 0;margin-bottom: 20px">
      <div class="form-inline">
        <button class="btn btn-success" (click)="add()">添加设备</button>
        <div class="form-group pull-right">
          <input type="text" class="form-control" style="width: 150px;" placeholder="设备ID" [(ngModel)]="filterId">
          <input type="text" class="form-control" style="width: 150px;" placeholder="设备名称" [(ngModel)]="filterName">
          <input class="form-control" type="button" value="筛选" (click)="refresh()">
        </div>
      </div>
    </div>
    <button class="btn btn-default btn-xs" style="margin-bottom: 10px" (click)="showTable=!showTable">切换显示</button>
    <div class="col-lg-12" style="padding: 0" *ngIf="showTable">
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
          <tr>
            <th><input type="checkbox"></th>
            <th>设备名称</th>
            <th>设备ID[二维码]</th>
            <th>设备秘钥</th>
            <th>设备状态</th>
            <th>上次登录时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let device of devices">
            <td><input type="checkbox"></td>
            <td><a target="_blank" [href]="'/#/device/detail/'+device.deviceId">{{device.name}}</a></td>
            <td><a href="javascript:void(0);" (click)="showQrCode(device.deviceId)">{{device.deviceId}}</a></td>
            <td>{{device.secret}}</td>
            <td>{{device.state==0?'离线':'在线'}}</td>
            <td>{{device.lastLoginTime==null?'从未登录':device.lastLoginTime}}</td>
            <td>
              <div class="btn-toolbar" style="display: flex">
                <button class="btn btn-info btn-xs" (click)="detail(device)">状态控制</button>
                <button class="btn btn-primary btn-xs" (click)="gotoSensors(device.deviceId)">传感器管理</button>
                <button class="btn btn-success btn-xs" (click)="edit(device)" *ngIf="user.me.level<2">编辑</button>
                <button class="btn btn-danger btn-xs" *ngIf="user.me.level<2">删除</button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-lg-12" style="padding: 0" *ngIf="!showTable">
      <div class="col-lg-4" *ngFor="let device of devices">
        <div class="info-box">
          <span class="info-box-icon bg-aqua" (click)="detail(device)">
            <img *ngIf="device['image']!=null && device['image']!=undefined && device['image']!=''"
                 [src]="device['image']">
            <i class="fa fa-android"
               *ngIf="device['image']==null || device['image']==undefined || device['image']==''"></i>
          </span>
          <div class="info-box-content">
            <span class="info-box-text">{{device.name}}:{{device.state==0?'离线':'在线'}}</span>
            <span class="info-box-text">设备ID:{{device.deviceId}}</span>
            <span class="info-box-text">设备秘钥:{{device.secret}}</span>
            <div class="btn-toolbar" style="display: flex">
              <button class="btn btn-primary btn-xs" (click)="gotoSensors(device.deviceId)">传感器管理</button>
              <button class="btn btn-success btn-xs" (click)="edit(device)" *ngIf="user.me.level<2">编辑</button>
              <button class="btn btn-danger btn-xs" *ngIf="user.me.level<2">删除</button>
            </div>
          </div>
          <!-- /.info-box-content -->
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="form-inline">
        <div class="form-group pull-right">
          <input class="form-control" type="button" value="上一页" [disabled]="page==1" (click)="goto(page-1)">
          <input class="form-control" style="width: 60px" type="text" [value]="page" #gotoPage>
          <span>{{' /'+maxPage.toString()+' '}}</span>
          <input class="form-control" type="button" value="前往" (click)="goto(gotoPage.value)">
          <input class="form-control" type="button" value="下一页" (click)="goto(page+1)">
        </div>
      </div>
    </div>
  </mk-box-content>
</mk-box>

